<template>
<div class="service">
  <div v-for="(value,key) in serviceList" :key="key" class="service-item">
    <div class="service-title">{{ key }}</div>
    <van-grid :column-num="4" :border="false">
      <van-grid-item
          v-for="(child,cindex) in value"
          :key="cindex"
          icon="photo-o"
          :text="child.name"
          @click="serviceClick"
      />
    </van-grid>
  </div>
</div>
</template>

<script>
import {getHomeServiceList} from "@/api/service";

export default {
  name: "Service",
  data() {
    return {
      allServiceList: []
    }
  },
  created() {
    getHomeServiceList().then(res => {
      this.allServiceList = res.data
    })
  },
  computed: {
    serviceList() {
      const result = {}
      this.allServiceList.forEach((service) => {
        const parent = result[service.pname]
        if (!parent) {
          result[service.pname] = [service]
        } else {
          parent.push(service)
        }
      })
      return result
    }
  },
  methods: {
    serviceClick() {
      this.$router.push('service/detail')
    }
  }
}
</script>

<style lang="less" scoped>
.service{
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  background: #F8F8F8;

  &-title {
    padding-left: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
  }
  &-item{
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .van-grid{
    background-color: #FFFFFF;
  }
}
</style>